<template>
  <div>
    <van-nav-bar title="站点详情" left-text="返回" left-arrow @click-left="onClickLeft"/>
  </div>
  <div class="container">
    <div class="detail-div-one">
        <van-space :align="align">
          <div style="height: 48px; width: 200px;">
            <h4 style="margin-top: 3px;margin-bottom: 3px">{{station.stationName}}</h4>
            <div style="display: flex;">
              <img style="height: 20px;" alt="Vue logo" src="../../images/24hours.png">
              <div style="margin-left: 3px;"> {{ station.openingHours }} 小时|{{station.dedicatedName}}专用</div>
            </div>
          </div>
          <div style="height: 48px; width: auto;background-color: white;padding-top: 5px">
            <div style="color: blue;font-weight: bolder;font-size: 18px;">{{ station.price }}元/度</div>
            <div style="color: lightgray;font-weight: bold;font-size: 14px;text-decoration: line-through;">
              {{ station.originalPrice}}元/度
            </div>
          </div>
        </van-space>
        <div style="display: flex;height: 20px;">
          <div style="background-color: red;">空: {{ station.gunCountEnd }}</div>
          <div style="background-color: cyan;">共：{{station.gunCount}}</div>
        </div>
        <div class="station-footer" style="display: flex;margin-bottom: 5px;padding-top: 10px;">
          <div style="margin-left: 3px;font-size: 12px;"> {{ station.address }}</div>
          <div style="display: flex;margin-left:auto;margin-right: 0%;">
            <div style="text-align: right;"> {{ station.distance }}Km</div>
            <!-- <img style="height: 20px;" src="../../images/guid.png"> -->
          </div>
        </div>
     
    </div>
    <div class="detail-div-two">
      <img style="height: 80px;width: 97%;margin-bottom: " src="../../images/station.jpg" alt="">
    </div>
    <div class="detail-div-three">
      <div class="detail-div-three-left">
        <div style="font-size: 14px;">
          <div>
            <span style="background-color: burlywood;color: rgb(255, 255, 255);">T</span>
            <span>营业时间：</span>
            <span> {{ station.openingHours }}</span>
          </div>
          <div>
            <span style="background-color: aqua;">P</span>
            <span>停车费用：</span>
            <span>{{ station.washFee }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="detail-div-four">
     <div style="display: flex; justify-content: space-between;">
       <button :class="{ active: active === 0 }" @click="setActive(0)" style="flex: 1;">详情</button>
       <button :class="{ active: active === 1 }" @click="setActive(1)" style="flex: 1;">终端</button>
       <button :class="{ active: active === 2 }" @click="setActive(2)" style="flex: 1;">评论</button>
     </div>
      
      <div v-if="active === 0">
        <span style="font-size: 18px; font-weight: bold;">电站简介</span><br>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;{{ station.remark }}</span>
      </div>
      <div v-if="active === 1">
        <div v-for="item in stationData" :key="item.id" class="card">
          <div class="card-content">
            <img src="../../images/charger.png" alt="Charger" class="charger-icon">
            <div class="info">
              <div class="gun-name">{{ item.gunName }}</div>
              <div class="details">
                <span><div style="color: #333;">枪编号: </div>{{ item.gunNo }}</span>
                <span><div style="color: #333;">枪类型: </div>{{ item.gunType === 0 ? '快充' : '慢充' }}</span>
                <span><div style="color: #333;">枪功率: </div>{{ item.gunPower }}kW</span>
              </div>
            </div>
            <div class="status" :class="{ 'in-use': item.status !== 0 }">
              <span v-if="item.status === 0">空闲中</span>
              <span v-else-if="item.status === 1">使用中</span>
              <span v-else-if="item.status === 2">维护中</span>
              <span v-else-if="item.status === 3">已报废</span>
              <span v-else-if="item.status === 4">调试中</span>

            </div>
          </div>
        </div>
      </div>
      <div v-if="active === 2">
        <div v-for="comment in comments" :key="comment.id" class="comment">
          <img :src="comment.acatarImg" alt="Avatar" class="avatar">
          <div class="comment-content">
            <div class="comment-header">
              <span class="username">{{ comment.userName }}</span>
              <span class="date">{{ new Date(comment.createTime).toLocaleString() }}</span>
            </div>
            <p>{{ comment.content }}</p>
          </div>
        </div>
      </div>
    </div>
    <a href="#" className="bds_weixin" data-cmd="weixin" title="分享到微信"></a>

    <div class="detail-div-five">
      <van-tabbar v-model="active2">
        <van-tabbar-item icon="star-o" @click="Collect()">收藏</van-tabbar-item>
        <van-tabbar-item icon="share-o" @click="showShareOptions">分享</van-tabbar-item>
        <van-tabbar-item icon="column" @click="Opt()">操作指南</van-tabbar-item>
        <van-tabbar-item :icon=chargeText.icon  @click="Charge()">{{ chargeText.Text }}</van-tabbar-item>
      </van-tabbar>

    </div>
  </div>

  <van-dialog v-model:show="showCommentDialog" title="添加评论" show-cancel-button>
    <van-field v-model="newComment.content" placeholder="请输入评论内容" />
    <template #footer>
      <van-button type="primary" @click="submitComment">提交</van-button>
    </template>
  </van-dialog>

  <van-dialog v-model:show="showShareDialog" title="选择分享平台">
    <van-button @click="shareToWeChat">分享到微信</van-button>
    <van-button @click="shareToQQ">分享到QQ</van-button>
  </van-dialog>
</template>
<script setup>
import { useRoute } from 'vue-router';
import CryptoJS from 'crypto-js';
import { ref } from 'vue';
import 'vant/lib/index.css';
import { GetCoreCommentAll, GetCoreCommentInsert, GetCoreGunAll } from '@/api/core';
import router from '@/router';
// import { GetCoreGunAll } from '@/api/core';

const routeInfo = useRoute();

// 解密 station 参数
const secretKey = 'mySecretKey123'; // 替换为你的密钥
const encryptedStation = routeInfo.query.station;
const bytes = CryptoJS.AES.decrypt(encryptedStation, secretKey);
const station = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
// const stationGun=ref({
//   id:station.id,
// })
console.log('解密后的站点信息:', station);

const onClickLeft = () => history.back();

const active = ref(0); // 初始化活动标签索引
const active2 = ref(0); // 初始化活动标签索引
const align = ref('center'); // 定义 align 属性
const stationData = ref([]); // 用于存储获取的数据
const chargeText = ref({
  Text: '领券充电', // 默认文本
  icon: 'shopping-cart-o' // 默认图标
});
const comments = ref([]); // 用于存储评论数据

const showCommentDialog = ref(false);
const newComment = ref({
  content:'',
  stationId:station.id,
});

const showShareDialog = ref(false);

function Collect() {
  
  console.info('收藏功能');
}

function showShareOptions() {
  showShareDialog.value = true;
}

function shareToWeChat() {
  showShareDialog.value = false;
  Share('weixin');
}

function shareToQQ() {
  showShareDialog.value = false;
  Share('qq');
}

function Share(platform) {
  console.info('分享');

  const shareData = {
    title: '电站详情',
    text: '查看这个电站的详细信息！',
    url: window.location.href,
    imageUrl: '../../images/station.jpg'
  };

  if (platform === 'weixin') {
    console.info('执行微信分享');
  
  } else if (platform === 'qq') {
    console.info('执行QQ分享');
    const qqShareUrl = `http://connect.qq.com/widget/shareqq/index.html?url=${encodeURIComponent(shareData.url)}&title=${encodeURIComponent(shareData.title)}&summary=${encodeURIComponent(shareData.text)}&pics=${encodeURIComponent(shareData.imageUrl)}`;
    window.open(qqShareUrl, '_blank');
  } else {
    console.warn('不支持的分享平台');
  }
}

function Opt() {
  console.info('操作指南');
}

function Charge() {
  if (active.value === 0) {
    console.info('领券充电');
    //TODO 领券充电跳转
    // router.push('/coupon/index');

  }
  if (active.value === 1) {
    console.info('扫描充电');
    router.push({
      path:'/code/index',
    }); 
  }
  if (active.value === 2) {
    console.info('评论');
    showCommentDialog.value = true;

  }
}



function submitComment() {
  console.info('提交评论:', newComment.value);
    
GetCoreCommentInsert(newComment.value).then(res => {
  console.info(res.data.data);
  if(res.data.code==200000){
    showCommentDialog.value = false;
    newComment.value = ''; // 清空输入框
    GetCoreCommentAll(station).then(res => {
      comments.value = res.data.data; // 存储评论数据
      console.log(res.data.data);
    });
  }
})


}


function setActive(index) {
  active.value = index;
  console.log(`Active tab set to: ${index}`);
  if (index === 0) {
    chargeText.value.Text = '领券充电';
    chargeText.value.icon = 'shopping-cart-o';
  }
  if (index === 1) {
    chargeText.value.Text = '扫描充电';
    chargeText.value.icon = 'scan';
    GetCoreGunAll(station).then(res => {
      stationData.value = res.data.data;
      console.log(res.data.data);
    });
  }
  if (index === 2) {
    chargeText.value.Text = '评论';
    chargeText.value.icon = 'comment-o';
    GetCoreCommentAll(station).then(res => {
      comments.value = res.data.data; // 存储评论数据
      console.log(res.data.data);
    });
  }
}



</script>

<style>
.van-nav-bar__title {
  font-weight: lighter;
}

.container {
  background-color: lightgray;
}


.detail-div-one {
  margin-left: 10px;
  margin-top: 10px;
  margin-right: 10px;
  padding-left: 3px;
  background-color: white;
}

.detail-div-two {
  padding-left: 10px;
  padding-top: 5px;
}

.detail-div-three {
  margin-left: 10px;
  margin-top: 5px;
  margin-right: 10px;
  display: flex;
  background-color: white;
}

.detail-div-four {
  margin-left: 10px;
  margin-top: 5px;
  margin-right: 10px;
  background-color: white;
}

.detail-content-div {
  padding-left: 10px;
}

button {
  margin: 5px;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background-color: white;
  color: #000;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

button.active {
  background-color: #007bff;
  color: white;
}

button:hover {
  background-color: #e0e0e0;
  color: #000;
}

.card {
  display: flex;
  align-items: flex-start;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
  padding: 15px;
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.card-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

.charger-icon {
  height: 50px;
  margin-right: 15px;
}

.info {
  flex: 1;
  font-family: 'Arial', sans-serif;
}

.gun-name {
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 18px;
}

.details {
  display: flex;
  justify-content: flex-start;
  font-size: 13px;
  color: #555;
  gap: 25px;
  width: 100%;
}

.status {
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 28px;
  border-radius: 14px;
  background-color: #d4edda;
  color: #155724;
  margin-left: auto;
}

.status.in-use {
  background-color: #f8d7da;
  color: #721c24;
}

.comment {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.comment-content {
  flex: 1;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
}

.username {
  color: #333;
}

.date {
  color: #999;
  font-size: 12px;
}
</style>